<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" >
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Dashboard - Ace Admin</title>

    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="../static/ace/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../static/ace/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="../static/ace/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="../static/ace/css/ace.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../static/ace/css/ace-part2.min.css" />
    <![endif]-->
    <link rel="stylesheet" href="../static/ace/css/ace-skins.min.css" />
    <link rel="stylesheet" href="../static/ace/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../static/ace/css/ace-ie.min.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="../static/ace/js/ace-extra.min.js"></script>


</head>
<body ng-app="app" class="no-skin" >
<div ng-controller="homeController">
    <!-- #section:basics/navbar.layout -->
    <div id="navbar" class="navbar navbar-default" style="height: 40px;">
        <script type="text/javascript">
            try{ace.settings.check('navbar' , 'fixed')}catch(e){}
        </script>

        <div class="navbar-container" id="navbar-container">
            <!-- #section:basics/sidebar.mobile.toggle -->
            <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler">
                <span class="sr-only">Toggle sidebar</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>
            </button>

            <!-- /section:basics/sidebar.mobile.toggle -->
            <div class="navbar-header pull-left">
                <!-- #section:basics/navbar.layout.brand -->
                <a href="#" class="navbar-brand">
                    <small>
                        <i class="fa fa-leaf"></i>
                        Ace Admin
                    </small>
                </a>

                <!-- /section:basics/navbar.layout.brand -->

                <!-- #section:basics/navbar.toggle -->

                <!-- /section:basics/navbar.toggle -->
            </div>

            <!-- #section:basics/navbar.dropdown -->
            <div class="navbar-buttons navbar-header pull-right" role="navigation">
                <ul class="nav ace-nav">
                    <li class="grey">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="ace-icon fa fa-tasks"></i>
                            <span class="badge badge-grey">4</span>
                        </a>

                        <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header">
                                <i class="ace-icon fa fa-check"></i>
                                4 Tasks to complete
                            </li>

                            <li>
                                <a href="#">
                                    <div class="clearfix">
                                        <span class="pull-left">Software Update</span>
                                        <span class="pull-right">65%</span>
                                    </div>

                                    <div class="progress progress-mini">
                                        <div style="width:65%" class="progress-bar"></div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="clearfix">
                                        <span class="pull-left">Hardware Upgrade</span>
                                        <span class="pull-right">35%</span>
                                    </div>

                                    <div class="progress progress-mini">
                                        <div style="width:35%" class="progress-bar progress-bar-danger"></div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="clearfix">
                                        <span class="pull-left">Unit Testing</span>
                                        <span class="pull-right">15%</span>
                                    </div>

                                    <div class="progress progress-mini">
                                        <div style="width:15%" class="progress-bar progress-bar-warning"></div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="clearfix">
                                        <span class="pull-left">Bug Fixes</span>
                                        <span class="pull-right">90%</span>
                                    </div>

                                    <div class="progress progress-mini progress-striped active">
                                        <div style="width:90%" class="progress-bar progress-bar-success"></div>
                                    </div>
                                </a>
                            </li>

                            <li class="dropdown-footer">
                                <a href="#">
                                    See tasks with details
                                    <i class="ace-icon fa fa-arrow-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="purple">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="ace-icon fa fa-bell icon-animated-bell"></i>
                            <span class="badge badge-important">8</span>
                        </a>

                        <ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header">
                                <i class="ace-icon fa fa-exclamation-triangle"></i>
                                8 Notifications
                            </li>

                            <li>
                                <a href="#">
                                    <div class="clearfix">
											<span class="pull-left">
												<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
												New Comments
											</span>
                                        <span class="pull-right badge badge-info">+12</span>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <i class="btn btn-xs btn-primary fa fa-user"></i>
                                    Bob just signed up as an editor ...
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="clearfix">
											<span class="pull-left">
												<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
												New Orders
											</span>
                                        <span class="pull-right badge badge-success">+8</span>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="clearfix">
											<span class="pull-left">
												<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
												Followers
											</span>
                                        <span class="pull-right badge badge-info">+11</span>
                                    </div>
                                </a>
                            </li>

                            <li class="dropdown-footer">
                                <a href="#">
                                    See all notifications
                                    <i class="ace-icon fa fa-arrow-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="green">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
                            <span class="badge badge-success">5</span>
                        </a>

                        <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header">
                                <i class="ace-icon fa fa-envelope-o"></i>
                                5 Messages
                            </li>

                            <li class="dropdown-content">
                                <ul class="dropdown-menu dropdown-navbar">
                                    <li>
                                        <a href="#">
                                            <img src="../static/ace/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Alex:</span>
														Ciao sociis natoque penatibus et auctor ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>a moment ago</span>
													</span>
												</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <img src="../static/ace/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Susan:</span>
														Vestibulum id ligula porta felis euismod ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>20 minutes ago</span>
													</span>
												</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <img src="../static/ace/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Bob:</span>
														Nullam quis risus eget urna mollis ornare ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>3:15 pm</span>
													</span>
												</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <img src="../static/ace/avatars/avatar2.png" class="msg-photo" alt="Kate's Avatar" />
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Kate:</span>
														Ciao sociis natoque eget urna mollis ornare ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>1:33 pm</span>
													</span>
												</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <img src="../static/ace/avatars/avatar5.png" class="msg-photo" alt="Fred's Avatar" />
												<span class="msg-body">
													<span class="msg-title">
														<span class="blue">Fred:</span>
														Vestibulum id penatibus et auctor  ...
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span>10:09 am</span>
													</span>
												</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown-footer">
                                <a href="inbox.html">
                                    See all messages
                                    <i class="ace-icon fa fa-arrow-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- #section:basics/navbar.user_menu -->
                    <li class="light-blue">
                        <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                            <img class="nav-user-photo" src="../static/ace/avatars/user.jpg" alt="Jason's Photo" />
								<span class="user-info">
									<small>Welcome,</small>
									Jason
								</span>

                            <i class="ace-icon fa fa-caret-down"></i>
                        </a>

                        <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                            <li>
                                <a href="#">
                                    <i class="ace-icon fa fa-cog"></i>
                                    Settings
                                </a>
                            </li>

                            <li>
                                <a href="profile.html">
                                    <i class="ace-icon fa fa-user"></i>
                                    Profile
                                </a>
                            </li>

                            <li class="divider"></li>

                            <li>
                                <a href="#">
                                    <i class="ace-icon fa fa-power-off"></i>
                                    Logout
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- /section:basics/navbar.user_menu -->
                </ul>
            </div>

            <!-- /section:basics/navbar.dropdown -->
        </div><!-- /.navbar-container -->
    </div>

    <!-- /section:basics/navbar.layout -->
    <div class="main-container" id="main-container">
        <script type="text/javascript">
            try{ace.settings.check('main-container' , 'fixed')}catch(e){}
        </script>

        <!-- #section:basics/sidebar -->
        <div id="sidebar" class="sidebar                  responsive">
            <script type="text/javascript">
                try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
            </script>

            <div class="sidebar-shortcuts" id="sidebar-shortcuts">
                <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
                    <button class="btn btn-success">
                        <i class="ace-icon fa fa-signal"></i>
                    </button>

                    <button class="btn btn-info">
                        <i class="ace-icon fa fa-pencil"></i>
                    </button>

                    <!-- #section:basics/sidebar.layout.shortcuts -->
                    <button class="btn btn-warning">
                        <i class="ace-icon fa fa-users"></i>
                    </button>

                    <button class="btn btn-danger">
                        <i class="ace-icon fa fa-cogs"></i>
                    </button>

                    <!-- /section:basics/sidebar.layout.shortcuts -->
                </div>

                <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
                    <span class="btn btn-success"></span>

                    <span class="btn btn-info"></span>

                    <span class="btn btn-warning"></span>

                    <span class="btn btn-danger"></span>
                </div>
            </div><!-- /.sidebar-shortcuts -->

            <ul class="nav nav-list">
                <li class="">
                    <a href="index.html">
                        <i class="menu-icon fa fa-tachometer"></i>
                        <span class="menu-text"> Dashboard </span>
                    </a>

                    <b class="arrow"></b>
                </li>

                <li class="">
                    <a href="#" class="dropdown-toggle">
                        <i class="menu-icon fa fa-desktop"></i>
                        <span class="menu-text"> UI &amp; Elements </span>

                        <b class="arrow fa fa-angle-down"></b>
                    </a>

                    <b class="arrow"></b>

                    <ul class="submenu">
                        <li class="">
                            <a href="#" class="dropdown-toggle">
                                <i class="menu-icon fa fa-caret-right"></i>

                                Layouts
                                <b class="arrow fa fa-angle-down"></b>
                            </a>

                            <b class="arrow"></b>

                            <ul class="submenu">
                                <li class="">
                                    <a href="top-menu.html">
                                        <i class="menu-icon fa fa-caret-right"></i>
                                        Top Menu
                                    </a>

                                    <b class="arrow"></b>
                                </li>

                                <li class="">
                                    <a href="mobile-menu-1.html">
                                        <i class="menu-icon fa fa-caret-right"></i>
                                        Default Mobile Menu
                                    </a>

                                    <b class="arrow"></b>
                                </li>

                                <li class="">
                                    <a href="mobile-menu-2.html">
                                        <i class="menu-icon fa fa-caret-right"></i>
                                        Mobile Menu 2
                                    </a>

                                    <b class="arrow"></b>
                                </li>

                                <li class="">
                                    <a href="mobile-menu-3.html">
                                        <i class="menu-icon fa fa-caret-right"></i>
                                        Mobile Menu 3
                                    </a>

                                    <b class="arrow"></b>
                                </li>
                            </ul>
                        </li>

                        <li class="">
                            <a href="typography.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Typography
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="elements.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Elements
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="buttons.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Buttons &amp; Icons
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="treeview.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Treeview
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="jquery-ui.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                jQuery UI
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="nestable-list.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Nestable Lists
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="#" class="dropdown-toggle">
                                <i class="menu-icon fa fa-caret-right"></i>

                                Three Level Menu
                                <b class="arrow fa fa-angle-down"></b>
                            </a>

                            <b class="arrow"></b>

                            <ul class="submenu">
                                <li class="">
                                    <a href="#">
                                        <i class="menu-icon fa fa-leaf"></i>
                                        Item #1
                                    </a>

                                    <b class="arrow"></b>
                                </li>

                                <li class="">
                                    <a href="#" class="dropdown-toggle">
                                        <i class="menu-icon fa fa-pencil"></i>

                                        4th level
                                        <b class="arrow fa fa-angle-down"></b>
                                    </a>

                                    <b class="arrow"></b>

                                    <ul class="submenu">
                                        <li class="">
                                            <a href="#">
                                                <i class="menu-icon fa fa-plus"></i>
                                                Add Product
                                            </a>

                                            <b class="arrow"></b>
                                        </li>

                                        <li class="">
                                            <a href="#">
                                                <i class="menu-icon fa fa-eye"></i>
                                                View Products
                                            </a>

                                            <b class="arrow"></b>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>

                <li class="active open">
                    <a href="#" class="dropdown-toggle">
                        <i class="menu-icon fa fa-list"></i>
                        <span class="menu-text"> Tables </span>

                        <b class="arrow fa fa-angle-down"></b>
                    </a>

                    <b class="arrow"></b>

                    <ul class="submenu">
                        <li class="active">
                            <a href="tables.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Simple &amp; Dynamic
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="jqgrid.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                jqGrid plugin
                            </a>

                            <b class="arrow"></b>
                        </li>
                    </ul>
                </li>

                <li class="">
                    <a href="#" class="dropdown-toggle">
                        <i class="menu-icon fa fa-pencil-square-o"></i>
                        <span class="menu-text"> Forms </span>

                        <b class="arrow fa fa-angle-down"></b>
                    </a>

                    <b class="arrow"></b>

                    <ul class="submenu">
                        <li class="">
                            <a href="form-elements.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Form Elements
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="form-wizard.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Wizard &amp; Validation
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="wysiwyg.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Wysiwyg &amp; Markdown
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="dropzone.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Dropzone File Upload
                            </a>

                            <b class="arrow"></b>
                        </li>
                    </ul>
                </li>

                <li class="">
                    <a href="widgets.html">
                        <i class="menu-icon fa fa-list-alt"></i>
                        <span class="menu-text"> Widgets </span>
                    </a>

                    <b class="arrow"></b>
                </li>

                <li class="">
                    <a href="calendar.html">
                        <i class="menu-icon fa fa-calendar"></i>

							<span class="menu-text">
								Calendar

                                <!-- #section:basics/sidebar.layout.badge -->
								<span class="badge badge-transparent tooltip-error" title="2 Important Events">
									<i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i>
								</span>

                                <!-- /section:basics/sidebar.layout.badge -->
							</span>
                    </a>

                    <b class="arrow"></b>
                </li>

                <li class="">
                    <a href="gallery.html">
                        <i class="menu-icon fa fa-picture-o"></i>
                        <span class="menu-text"> Gallery </span>
                    </a>

                    <b class="arrow"></b>
                </li>

                <li class="">
                    <a href="#" class="dropdown-toggle">
                        <i class="menu-icon fa fa-tag"></i>
                        <span class="menu-text"> More Pages </span>

                        <b class="arrow fa fa-angle-down"></b>
                    </a>

                    <b class="arrow"></b>

                    <ul class="submenu">
                        <li class="">
                            <a href="profile.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                User Profile
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="inbox.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Inbox
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="pricing.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Pricing Tables
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="invoice.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Invoice
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="timeline.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Timeline
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="login.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Login &amp; Register
                            </a>

                            <b class="arrow"></b>
                        </li>
                    </ul>
                </li>

                <li class="">
                    <a href="#" class="dropdown-toggle">
                        <i class="menu-icon fa fa-file-o"></i>

							<span class="menu-text">
								Other Pages

                                <!-- #section:basics/sidebar.layout.badge -->
								<span class="badge badge-primary">5</span>

                                <!-- /section:basics/sidebar.layout.badge -->
							</span>

                        <b class="arrow fa fa-angle-down"></b>
                    </a>

                    <b class="arrow"></b>

                    <ul class="submenu">
                        <li class="">
                            <a href="faq.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                FAQ
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="error-404.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Error 404
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="error-500.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Error 500
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="grid.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Grid
                            </a>

                            <b class="arrow"></b>
                        </li>

                        <li class="">
                            <a href="blank.html">
                                <i class="menu-icon fa fa-caret-right"></i>
                                Blank Page
                            </a>

                            <b class="arrow"></b>
                        </li>
                    </ul>
                </li>
            </ul><!-- /.nav-list -->

            <!-- #section:basics/sidebar.layout.minimize -->
            <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
                <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
            </div>

            <!-- /section:basics/sidebar.layout.minimize -->
            <script type="text/javascript">
                try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
            </script>
        </div>

        <!-- /section:basics/sidebar -->
        <div class="main-content">
            <!-- #section:basics/content.breadcrumbs -->
            <div class="breadcrumbs" id="breadcrumbs">
                <script type="text/javascript">
                    try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
                </script>

                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#">Home</a>
                    </li>

                    <li>
                        <a href="#">Tables</a>
                    </li>
                    <li class="active">Simple &amp; Dynamic</li>
                </ul><!-- /.breadcrumb -->

                <!-- #section:basics/content.searchbox -->
                <div class="nav-search" id="nav-search">
                    <form class="form-search">
							<span class="input-icon">
								<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
								<i class="ace-icon fa fa-search nav-search-icon"></i>
							</span>
                    </form>
                </div><!-- /.nav-search -->

                <!-- /section:basics/content.searchbox -->
            </div>

            <!-- /section:basics/content.breadcrumbs -->
            <div class="page-content">
                <!-- #section:settings.box -->
                <div class="ace-settings-container" id="ace-settings-container">
                    <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
                        <i class="ace-icon fa fa-cog bigger-150"></i>
                    </div>

                    <div class="ace-settings-box clearfix" id="ace-settings-box">
                        <div class="pull-left width-50">
                            <!-- #section:settings.skins -->
                            <div class="ace-settings-item">
                                <div class="pull-left">
                                    <select id="skin-colorpicker" class="hide">
                                        <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                                        <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                                        <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                                        <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                                    </select>
                                </div>
                                <span>&nbsp; Choose Skin</span>
                            </div>

                            <!-- /section:settings.skins -->

                            <!-- #section:settings.navbar -->
                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
                                <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
                            </div>

                            <!-- /section:settings.navbar -->

                            <!-- #section:settings.sidebar -->
                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
                                <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
                            </div>

                            <!-- /section:settings.sidebar -->

                            <!-- #section:settings.breadcrumbs -->
                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
                                <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
                            </div>

                            <!-- /section:settings.breadcrumbs -->

                            <!-- #section:settings.rtl -->
                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
                                <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
                            </div>

                            <!-- /section:settings.rtl -->

                            <!-- #section:settings.container -->
                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
                                <label class="lbl" for="ace-settings-add-container">
                                    Inside
                                    <b>.container</b>
                                </label>
                            </div>

                            <!-- /section:settings.container -->
                        </div><!-- /.pull-left -->

                        <div class="pull-left width-50">
                            <!-- #section:basics/sidebar.options -->
                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" />
                                <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
                            </div>

                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" />
                                <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
                            </div>

                            <div class="ace-settings-item">
                                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" />
                                <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
                            </div>

                            <!-- /section:basics/sidebar.options -->
                        </div><!-- /.pull-left -->
                    </div><!-- /.ace-settings-box -->
                </div><!-- /.ace-settings-container -->

                <!-- /section:settings.box -->
                <div class="page-header">
                    <h1>
                        Tables
                        <small>
                            <i class="ace-icon fa fa-angle-double-right"></i>
                            Static &amp; Dynamic Tables
                        </small>
                    </h1>
                </div><!-- /.page-header -->

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="row">
                            <div class="col-xs-12">
                                <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th class="center">
                                            <label class="position-relative">
                                                <input type="button" class="ace" value="新建数据库" ng-click="newDatabase()" />
                                                <span class="lbl"></span>
                                            </label>
                                        </th>
                                        <th>序号</th>
                                        <th>数据库名</th>
                                        <th>用户名</th>
                                        <th>连接地址</th>
                                        <th>状态</th>
                                        <th></th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                  <!--  <tr>
                                        <td class="center">
                                            <label class="position-relative">
                                                <input type="checkbox" class="ace" />
                                                <span class="lbl"></span>
                                            </label>
                                        </td>

                                        <td>
                                            <a href="#">ace.com</a>
                                        </td>
                                        <td>$45</td>
                                        <td class="hidden-480">3,330</td>
                                        <td>Feb 12</td>

                                        <td class="hidden-480">
                                            <span class="label label-sm label-warning">Expiring</span>
                                        </td>

                                        <td>
                                            <div class="hidden-sm hidden-xs btn-group">
                                                <button class="btn btn-xs btn-success">
                                                    <i class="ace-icon fa fa-check bigger-120"></i>
                                                </button>

                                                <button class="btn btn-xs btn-info">
                                                    <i class="ace-icon fa fa-pencil bigger-120"></i>
                                                </button>

                                                <button class="btn btn-xs btn-danger">
                                                    <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                                </button>

                                                <button class="btn btn-xs btn-warning">
                                                    <i class="ace-icon fa fa-flag bigger-120"></i>
                                                </button>
                                            </div>

                                            <div class="hidden-md hidden-lg">
                                                <div class="inline position-relative">
                                                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                                        <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                                    </button>

                                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                                        <li>
                                                            <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																		<span class="blue">
																			<i class="ace-icon fa fa-search-plus bigger-120"></i>
																		</span>
                                                            </a>
                                                        </li>

                                                        <li>
                                                            <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																		<span class="green">
																			<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
																		</span>
                                                            </a>
                                                        </li>

                                                        <li>
                                                            <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																		<span class="red">
																			<i class="ace-icon fa fa-trash-o bigger-120"></i>
																		</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>-->
                                    <tr ng-repeat="x in page">
                                        <td class="center">
                                            <label class="position-relative">
                                                <input type="checkbox" class="ace" />
                                                <span class="lbl"></span>
                                            </label>
                                        </td>
                                        <td>
                                            {{$index + 1}}
                                        </td>
                                        <td>{{x.dbName}}</td>
                                        <td>{{x.username}}</td>
                                        <td>{{x.dbDomain}}</td>
                                        <td>{{x.status}}</td>
                                        <td>
                                            <div class="hidden-sm hidden-xs btn-group">
                                                 <span ng-if="x.status == 0">
                                                      <button class="btn btn-xs btn-success">
                                                          <a title="初始化" href="javascript:"   class="ace-icon fa fa-check bigger-120" ng-click="initDB(x.id)" ></a>
                                                      </button>
                                                 </span>

                                                <span ng-if="x.status == 1">
                                                    <button class="btn btn-xs btn-info" >
                                                        <a title="数据库列表" href="javascript:"   class="ace-icon fa fa-pencil bigger-120" ng-click="dbTableList(x.id)" ></a>
                                                    </button>
                                                </span>

                                                <button class="btn btn-xs btn-danger">
                                                    <a title="数据库列表" href="javascript:"   class="ace-icon fa fa-trash-o bigger-120" ng-click="dbTableList(x.id)" ></a>
                                                </button>

                                                <button class="btn btn-xs btn-warning" >
                                                    <a title="新增表结构" href="javascript:"   class="ace-icon fa fa-flag bigger-120" ng-click="addTable(x.id)"></a>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div><!-- /.span -->
                        </div><!-- /.row -->

                        <!--<div class="hr hr-18 dotted hr-double"></div>

                        <h4 class="pink">
                            <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
                            <a href="#modal-table" role="button" class="green" data-toggle="modal"> Table Inside a Modal Box </a>
                        </h4>

                        <div class="hr hr-18 dotted hr-double"></div>-->

                        <div id="modal-table" class="modal fade" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header no-padding">
                                        <div class="table-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                <span class="white">&times;</span>
                                            </button>
                                            Results for "Latest Registered Domains
                                        </div>
                                    </div>

                                    <div class="modal-body no-padding">
                                        <table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
                                            <thead>
                                            <tr>
                                                <th>序号</th>
                                                <th>数据库名</th>
                                                <th>用户名</th>
                                                <th>连接地址</th>
                                                <th>状态</th>
                                                <th>
                                                    <i class="ace-icon fa fa-clock-o bigger-110"></i>
                                                    Update
                                                </th>
                                            </tr>
                                            </thead>

                                            <tbody>
                                            <tr>
                                                <td>
                                                    <a href="#">ace.com</a>
                                                </td>
                                                <td>$45</td>
                                                <td>3,330</td>
                                                <td>Feb 12</td>
                                            </tr>
                                            <tr ng-repeat="x in page">
                                                <td>
                                                    {{$index + 1}}
                                                </td>
                                                <td>{{x.username}}</td>
                                                <td></td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="modal-footer no-margin-top">
                                        <button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
                                            <i class="ace-icon fa fa-times"></i>
                                            Close
                                        </button>

                                        <ul class="pagination pull-right no-margin">
                                            <li class="prev disabled">
                                                <a href="#">
                                                    <i class="ace-icon fa fa-angle-double-left"></i>
                                                </a>
                                            </li>

                                            <li class="active">
                                                <a href="#">1</a>
                                            </li>

                                            <li>
                                                <a href="#">2</a>
                                            </li>

                                            <li>
                                                <a href="#">3</a>
                                            </li>

                                            <li class="next">
                                                <a href="#">
                                                    <i class="ace-icon fa fa-angle-double-right"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div><!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div><!-- /.main-content -->

        <div class="footer">
            <div class="footer-inner">
                <!-- #section:basics/footer -->
                <div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">Ace</span>
							Application &copy; 2013-2014
						</span>

                    &nbsp; &nbsp;
						<span class="action-buttons">
							<a href="#">
                                <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
                            </a>

							<a href="#">
                                <i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
                            </a>

							<a href="#">
                                <i class="ace-icon fa fa-rss-square orange bigger-150"></i>
                            </a>
						</span>
                </div>

                <!-- /section:basics/footer -->
            </div>
        </div>

        <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
            <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
        </a>
    </div><!-- /.main-container -->

    <!-- 新增数据库配置 -->
    <div id="newForm" style="display: none;width:750px;" >
        <!-- PAGE CONTENT BEGINS -->
        <form class="form-horizontal" role="form" style="width: 500px;">
            <div class="space-4"></div>
            <!-- #section:elements.form -->
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 数据库名称: </label>

                <div class="col-sm-9">
                    <input type="text" id="form-field-1" placeholder="dbName" ng-model="dataBaseBean.dbName"  class="col-xs-10 col-sm-8" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> 数据库地址: </label>

                <div class="col-sm-9">
                    <input type="text" id="form-field-2" placeholder="dbDomain"  ng-model="dataBaseBean.dbDomain" class="col-xs-10 col-sm-8" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-3"> 用户名: </label>

                <div class="col-sm-9">
                    <input type="text" id="form-field-3" placeholder="username"  ng-model="dataBaseBean.username" class="col-xs-10 col-sm-8" />
                </div>
            </div>

            <!-- /section:elements.form -->
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-4"> 密码: </label>

                <div class="col-sm-9">
                    <input type="password" id="form-field-4" placeholder="password"  ng-model="dataBaseBean.password" class="col-xs-10 col-sm-5" />
                </div>
            </div>

            <div class="space-4"></div>
            <div class="col-md-offset-4 col-md-8" style="margin-bottom: 20px;">
                <button class="btn btn-info" type="button" ng-click="save()">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                    保存
                </button>
                &nbsp; &nbsp; &nbsp;
                <button class="btn" type="reset" ng-click="close()">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                    取消
                </button>
            </div>
            <div class="space-4"></div>

        </form>
    </div>

    <!-- 新增数据库表 -->
    <div id="newTableForm"   style="display: none;width:750px;height: 300px;" >
        <!-- PAGE CONTENT BEGINS -->
        <form class="form-horizontal" role="form" style="width: 500px;height: 300px;">
            <div class="space-4"></div>
            <!-- #section:elements.form -->
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 表名称: </label>

                <div class="col-sm-9">
                    <input type="text" id="name" placeholder="name" ng-model="dataTableBean.name"  class="col-xs-10 col-sm-8" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> 备注: </label>

                <div class="col-sm-9">
<!--
                    <input type="text" id="content" placeholder="content"  ng-model="dataTableBean.content" class="col-xs-10 col-sm-8" />
-->
                    <textarea ng-model="dataTableBean.content"  id="content" ></textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-3"> 字符集: </label>

                <div class="col-sm-9">
                    <input type="text" id="charSet" placeholder="charSet"  ng-model="dataTableBean.charSet" class="col-xs-10 col-sm-8" />
                </div>
            </div>

            <!-- /section:elements.form -->
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-4"> 存储引擎: </label>
                <div class="col-sm-4">
                    <input type="password" id="dbEngine" placeholder="dbEngine"  ng-model="dataTableBean.dbEngine" class="col-xs-10 col-sm-5" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-4"> 表字段: </label>
                <table style="margin-left: 70px;">
                    <tr>
                        <td style="min-width: 100px;">字段名称</td><td><input type="text" ng-model="colName" style="width: 100px;"/></td>
                        <td style="min-width: 100px;">字段类型</td><td><select ng-model="colType" style="width: 100px;">
                        <option th:value="int">int</option>
                        <option th:value="bigint">bigint</option>
                        <option th:value="varchar">varchar</option>
                    </select>
                    </td>
                    </tr>


                    <tr>
                        <td style="min-width: 100px;">字段长度</td><td> <select ng-model="colLength" style="width: 100px;">
                        <option th:value="1">1</option>
                        <option th:value="2">2</option>
                        <option th:value="11">11</option>
                        <option th:value="20">20</option>
                        <option th:value="32">32</option>
                        <option th:value="64">64</option>
                        <option th:value="128">128</option>
                        <option th:value="256">256</option>
                        <option th:value="512">512</option>
                        <option th:value="1024">1024</option>
                        <option th:value="2048">2048</option>
                    </select>
                    </td>
                        <td>字段描述</td><td><input type="text" ng-model="colDesc"/></td>
                    </tr>
                    <tr>
                        <td>是否必填</td>
                        <td>
                            <select ng-model="notNull" style="width: 100px;">
                                <option th:value="Y">是</option>
                                <option th:value="N">否</option>
                            </select>
                        </td>
                        <td>字段默认值</td>
                        <td>
                            <input type="text" ng-model="defaultValue"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-info" type="button" ng-click="addColumnInfo()">
                                <i class="ace-icon fa fa-check bigger-110"></i>
                                新增
                            </button>
                        </td>
                    </tr>

                </table>
            </div>

            <!-- /section:elements.form -->
            <div class="space-4"></div>

            <div class="form-group">
                <table style="margin-left: 70px;">
                    <thead>
                        <td class="text-left" >序号</td>
                        <td class="text-left" style="padding-left: 15px;">字段名称</td>
                        <td class="text-left" style="padding-left: 15px;">类型</td>
                        <td class="text-left" style="padding-left: 15px;">长度</td>
                        <td class="text-left" style="padding-left: 15px;">描述</td>
                        <td class="text-left" style="padding-left: 15px;">默认值</td>
                        <td class="text-left" style="padding-left: 15px;">是否为空</td>

                    </thead>
                    <tbody>
                    <tr  ng-repeat="x in columnList" style="text-align: center;">
                        <td>{{$index+1}}</td>
                        <td>{{x.colName}}</td>
                        <td>{{x.colType}}</td>
                        <td>{{x.colLength}}</td>
                        <td>{{x.colDesc}}</td>
                        <td>{{x.defaultValue}}</td>
                        <td>{{x.notNull}}</td>
                    </tr>
                    </tbody>

                </table>
            </div>

            <div class="space-4"></div>
            <div class="col-md-offset-4 col-md-8" style="margin-bottom: 20px;">
                <button class="btn btn-info" type="button" ng-click="saveDBTable()">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                    保存
                </button>
                &nbsp; &nbsp; &nbsp;
                <button class="btn" type="reset" ng-click="close()">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                    取消
                </button>
            </div>
            <div class="space-4"></div>

        </form>
    </div>


</div>
</body>
<script src="../static/js/jquery/jquery-1.8.3.min.js"></script>
<script src="../static/ace/js/bootstrap.min.js"></script>
<!-- ace scripts -->
<script src="../static/ace/js/ace-elements.min.js"></script>
<script src="../static/ace/js/ace.min.js"></script>

<script src="../static/js/angularjs/angular.min.js"></script>
<script src="../static/js/app.js"></script>
<script src="../static/js/controllers.js"></script>
<script src="../static/js/controller/homeController.js"></script>
<script src="../static/js/controller/directives.js"></script>


<script src="../static/js/plugin/layer/layer.js"></script>
<script src="../static/js/dialog.js"></script>

<!-- page specific plugin scripts -->
<script src="../static/ace/js/jquery.dataTables.min.js"></script>
<script src="../static/ace/js/jquery.dataTables.bootstrap.js"></script>



<link rel="stylesheet" href="../static/ace/css/ace.onpage-help.css" />
<link rel="stylesheet" href="../static/docs/assets/js/themes/sunburst.css" />

<script type="text/javascript"> ace.vars['base'] = '..'; </script>
<script src="../static/ace/js/ace/ace.onpage-help.js"></script>
<script src="../static/docs/assets/js/rainbow.js"></script>
<script src="../static/docs/assets/js/language/generic.js"></script>
<script src="../static/docs/assets/js/language/html.js"></script>
<script src="../static/docs/assets/js/language/css.js"></script>
<script src="../static/docs/assets/js/language/javascript.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('homeController', function($rootScope, $scope, $http) {
    $scope.columnList = [];



    $scope.data = {
        no : 'No.1234567890',
        quantity : 100,
        'date' : '2016-12-20'
    };
    $scope.page = null;
    getPageList();

    $scope.postJson = function() {
        $http({
            url : '/postJson',
            method : 'POST',
            data : $scope.data
        }).success(function(r) {
            $scope.responseBody = r;
        });
    }
    var index = 0;
    var tableIndex = 0;
    $scope.newDatabase = function(){
        index = dialog.openDialog({title:"新建数据库",content:$("#newForm")});
    }

    $scope.close = function(){
        dialog.close(index);
    }

    //新增表字段
    $scope.addColumnInfo = function(){
        var obj = new Object();
        obj.colName = $scope.colName;
        obj.colType = $scope.colType;
        obj.notNull = $scope.notNull;
        obj.colDesc = $scope.colDesc;
        obj.colLength = $scope.colLength
        obj.defaultValue = $scope.defaultValue;


        $scope.colName = "";
        $scope.colType = "";
        $scope.notNull = "";
        $scope.colDesc = "";
        $scope.colLength = ""
        $scope.defaultValue = "";


        $scope.columnList.push(obj);

    }

    //保存数据库信息
    $scope.save = function(){
        var data = new FormData();
        data.append("dbName",$scope.dataBaseBean.dbName);
        data.append("username",$scope.dataBaseBean.username);
        data.append("dbDomain",$scope.dataBaseBean.dbDomain);
        data.append("password",$scope.dataBaseBean.password);
        $http({
            url:"/dbinfo/save",
            method: "POST",
            data: data,
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).success(function(result){
            if(result.code == 0){
                dialog.success("成功",2000);
                dialog.close(index);
            }else{
                dialog.error("失败",2000);
            }
        }).error(function(result){
        })
    }

    $scope.saveDBTable = function(){

    }

    function  getPageList(){
        $http({
            url:"/dbinfo/pagelist",
            method: "GET"
        }).success(function(result){
            $scope.page = result.data;
        }).error(function(result){
        })
    }

    $scope.initDB = function(id){
        alert("id = "+id);
        $http({
            url:"/dbinfo/initdb/"+id,
            method: "GET"
        }).success(function(result){
            if(result.code == 0) {
                dialog.success("成功", 2000);
            }else{
                dialog.error("失败",2000);
            }
        }).error(function(result){
        })
    }


    $scope.addTable = function(id ){
        tableIndex = dialog.openDialog({title:"新建数据库表",content:$("#newTableForm"),area: ['800px', '600px']});
    }
});
</script>
</html>